<template>
	<widget-root :styles="styles">
		<view class="title" :style="{
			'background-color': styles.bg_color,
			'border-radius': `${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(styles.border_radius_bottom)}rpx ${$px2rpx(styles.border_radius_bottom)}rpx`
			}">
			<view class="title-style1 flex-col col-center">
				<view class="title-content" :style="[infoStyle]">
					<view v-if="content.scrolling">
						<view v-for="item, idx in textArr" :key="idx" :style="[defSpanStyle]">{{
              item }}</view>
					</view>
					<view style="display:block;" :style="[spanStyle]" v-html="textArr"></view>
				</view>
			</view>
		</view>
	</widget-root>
</template>

<script type="text/javascript">
	export default {
		props: {
			content: {
				type: [Object, Array]
			},
			styles: {
				type: [Object, Array]
			},
		},
		data() {
			return {

			}
		},
		methods: {},
		computed: {
			infoStyle() {
				const {
					scrolling
				} = this.content
				const {
					height,
					font_size,
					font_color
				} = this.styles

				var scroll_style = {}
				if (scrolling) {
					scroll_style = {
						'overflow': 'hidden',
						'overflow-y': 'auto',
						'border': 0,
						'resize': 'none',
					}
				}
				return {
					'color': font_color,
					'font-size': `${font_size}px`,
					'height': `${height}px`,
					'word-break': 'break-all',
					'width': '100%',
					'overflow': 'hidden',
					...scroll_style
				};
			},

			defSpanStyle() {
				return {
					'text-align': this.content.align,
					'display': 'inline-block',
					'width': '100%',
					'min-height': '10px'
				};
			},
			spanStyle() {
				const {
					scrolling
				} = this.content

				var scroll_style = {}
				if (!scrolling) {
					scroll_style = {
						'text-align': this.content.align,
						'overflow': 'hidden',
						'text-overflow': 'ellipsis',
						'display': '-webkit-box',
						'-webkit-line-clamp': 10,
						'line-clamp': 10,
						'-webkit-box-orient': 'vertical',
						'overflow-wrap': ' break-word',
					}
				}

				return scroll_style;
			},
			textArr() {
				const {
					scrolling,
					text
				} = this.content
				var data = text.split("\n")
				return scrolling ? data : data.join("<br>")
			}
		}
	};
</script>

<style lang="scss" scoped>
	.title {
		padding: 24rpx 30rpx;

	}
</style>